<template>
  <div class="wrapper-jsc">
    <div class="date-box">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="年">
          <el-date-picker
            v-model="listQuery.year"
           type="year"
            value-format="yyyy"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="month-jsc" label="月份">
          <el-select filterable
            v-model="listQuery.month"
            placeholder="月"
            @change="fetchData()"
          >
            <el-option label="全部" value="0"></el-option>
            <el-option label="1月" value="1"></el-option>
            <el-option label="2月" value="2"></el-option>
            <el-option label="3月" value="3"></el-option>
            <el-option label="4月" value="4"></el-option>
            <el-option label="5月" value="5"></el-option>
            <el-option label="6月" value="6"></el-option>
            <el-option label="7月" value="7"></el-option>
            <el-option label="8月" value="8"></el-option>
            <el-option label="9月" value="9"></el-option>
            <el-option label="10月" value="10"></el-option>
            <el-option label="11月" value="11"></el-option>
            <el-option label="12月" value="12"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" >
      <el-tab-pane label="产能数据" name="first">
        <el-row
          style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
        >
          <div class="chart-wrapper">
            <line-chart ref='lineCha' :listQuery='this.listQuery' />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="库存情况" name="second">
        <el-table border :data="list" style="width: 100%; padding-top: 15px">
          <el-table-column label="战区">
            <template slot-scope="{ row }">
              {{ row.regionName }}
            </template>
          </el-table-column>
          <el-table-column label="未启动" align="center">
            <template slot-scope="{ row }">
              {{ row.a }}
            </template>
          </el-table-column>
          <el-table-column label="沟通中" align="center">
            <template slot-scope="{ row }">
              {{ row.b }}
            </template>
          </el-table-column>
          <el-table-column label="待拍摄" align="center">
            <template slot-scope="{ row }">
              {{ row.c }}
            </template>
          </el-table-column>
          <el-table-column label="拍摄中" align="center">
            <template slot-scope="{ row }">
              {{ row.d }}
            </template>
          </el-table-column>
          <el-table-column label="待制作" align="center">
            <template slot-scope="{ row }">
              {{ row.e }}
            </template>
          </el-table-column>
          <el-table-column label="制作中" align="center">
            <template slot-scope="{ row }">
              {{ row.f }}
            </template>
          </el-table-column>
          <el-table-column label="待回款" align="center">
            <template slot-scope="{ row }">
              {{ row.g }}
            </template>
          </el-table-column>
          <el-table-column label="库存汇总" align="center">
            <template slot-scope="{ row }">
              {{ row.totalCount }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getOnLineCourseStock } from "@/api/admin_jsc";

import LineChart from "./components/LineChart";
export default {
  data() {
    return {
      activeName:'first',
      listQuery: {
        year: "2020",
        month: "0",
      },
       list: [], 
    };
  },
  components: {
    LineChart,
  },
  created() {
    this.fetchData();
  },
  methods: {
    
    fetchData() {
      getOnLineCourseStock().then((response) => {
        this.list = response.data.data
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.zq-box {
  margin-top: 24px;
  margin-bottom: 24px;
}
</style>
